<template>

  <el-dialog
    v-model="dialogVisible"
    title="模型预览器"
	:show-close="false"
	:fullscreen="fullscreen"
    destroy-on-close
	class="avw-dialog"
	:close-on-click-modal="false"
  >
	<template #header="{ close, titleId}">
		<div class="my-header">
			<div :id="titleId" class="title">
				<span>模型预览器</span>
			</div>
			<div class="tools">
				<el-icon @click="close"><Close /></el-icon>
				<el-icon @click="isFullscreen"><FullScreen /></el-icon>
			</div>
		</div>
	</template>
	<div class="main">
		<div id="player" class="viewer" ref="viewerRef">
		</div>
		
		<div class="right" style="padding-top: 2px;">
			<div class="box-title">
				<span>模型属性</span>
			</div>
			<el-tabs
				v-model="activeName"
				type="card"
				class="demo-tabs"
				@tab-click="handleClick">
				<el-tab-pane label="tree" name="tree">
					<template #label>
						<span class="custom-tabs-label">
							<svg-icon icon-class="modelTree"/>
						</span>
					</template>
				</el-tab-pane>
				<el-tab-pane label="joint" name="joint">
					<template #label>
						<span class="custom-tabs-label">
							<svg-icon icon-class="joint"/>
						</span>
					</template>					
				</el-tab-pane>
				<el-tab-pane label="animation" name="animation">
					<template #label>
						<span class="custom-tabs-label">
							<svg-icon icon-class="animation"/>
						</span>
					</template>						
				</el-tab-pane>
				<el-tab-pane label="info" name="info">
					<template #label>
						<span class="custom-tabs-label">
							<svg-icon icon-class="info"/>
						</span>
					</template>						
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
  </el-dialog>

</template>
<script lang="ts" setup>
	
	import {
	  Close,FullScreen
	} from '@element-plus/icons-vue'
	import cloudRenderer from "uesuperapi";
	import { orderForRender } from "@/api/render";
	import {ref,defineEmits } from 'vue'
	import type { TabsPaneContext } from 'element-plus'
	import {useResizeObserver} from "@vueuse/core";

	const dialogVisible = ref(false);
	const fullscreen = ref(false);
	const activeName = ref('tree');
	const viewerRef = ref<HTMLElement>();

	let CloudRender: any;
	
	const handleClick = (tab: TabsPaneContext, event: Event) => {
	  console.log(tab, event)
	}
	
	const isFullscreen=()=>{
		fullscreen.value=!fullscreen.value;
	}
	
	const openDialog=(row:any)=>{
		dialogVisible.value=true;
	}
	
	const renderer=(appid:string)=>{
		console.log(resRect)
		CloudRender = new cloudRenderer("player", 0);
		orderForRender({
		  appid: appid,
		  resX:parseInt(resRect.resX),
		  resY:parseInt(resRect.resY) ,
		}).then((rsp: any) => {
		  console.log("rsp", rsp);
		  if (rsp.code == 200) {
			const url = rsp.result.url;
			CloudRender.SuperAPI("loadCompleteResponse", (e: any) => {
			  console.log(e);
			});
			CloudRender.SuperAPI("StartRenderCloud", url);
		  }
		});
	}
	
	const resRect  = reactive({
	  resX:'',
	  resY:'',
	});
	 
	useResizeObserver(viewerRef , (entries) => {
		const entry = entries[0]
		const { width, height } = entry.contentRect
		resRect.resX = `${width}`;
		resRect.resY = `${height}`;
		console.log(`width: ${resRect.resX}, height: ${resRect.resY}`)
		renderer('b847e10b13a8436cb1c6a8d86243ef15');
	})
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialogVisible.value=false;
		fullscreen.value=false;
		emits('closeDialog')
	}
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	//组件挂载完毕更新size
	onMounted(()=>{
	})
	//组件要卸载的时候移除事件监听
	onBeforeUnmount(() => {
	})

</script>
<style scoped>
	
	#player{
		width: 100%;
		height: 100%;
		pointer-events: auto;
	}
	
	.my-header {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  color: #ccc;
	  .title{
		display: flex;
		>span{
			 color: #ccc;
		} 
	  }
	  .tools{
		flex: 1;  
		display: flex;
		flex-direction: row-reverse;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.el-icon{
			margin-right: 5px;
			cursor: pointer;
		}
	  }
	}
	:deep(.el-tabs--card>.el-tabs__header .el-tabs__nav){
		border-bottom: none;
		border-radius:0px;
		box-sizing: border-box;
	}
	:deep(.el-tabs--card>.el-tabs__header .el-tabs__item){
		border-radius: 0;
		border-top: 2px solid transparent;
	}
	
	:deep(.el-tabs--card>.el-tabs__header .el-tabs__item.is-active){
		border-radius: 0;
		border-top: 2px solid #0080ff;
		color: linear-gradient(#26ffff,#0080ff);
		color: #26ffff;
		background-color: #313f50;
		border-bottom-color:transparent;
	}
	
	.custom-tabs-label{
		.svg-icon{
			font-size: 1rem;
		}
		.svg-icon:hover{
			color: blue;
		}
	}

</style>
